<template>
    <div class="business_account_count_detail" v-show="isShow" v-loading="tableLoading">
        <div class="title">
            <div class="title_choose_time">
                <el-date-picker
                    v-model="searchForm.date"
                    type="daterange"
                    :clearable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <div style="padding-left: 10px">
                    <el-button type="primary" class="global-filter-item-search" @click="getMsg">搜索</el-button>
                </div>
            </div>
            <div class="title_choose_list">
                <div class="title_choose_item" v-for="(item, index) in dateList" :key="index">
                    <el-button type="text" @click="chooseDate(item)">{{ item.label }}</el-button>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <div class="content_d">
                    <div class="content_detail">
                        <div class="content_left_title">客户总数{{ accountTotalNum }}</div>
                        <div class="content_left_content">
                            <div>
                                <el-table
                                    height="190"
                                    :row-style="{height: '0'}"
                                    :cell-style="{padding: '3px'}"
                                    max-height="190" border
                                    :data="AccountNumGroupByDepart"
                                    style="width: 90%">
                                    <el-table-column
                                        prop="name"
                                        label="部门">
                                    </el-table-column>
                                    <el-table-column
                                        prop="addAccountNum"
                                        label="新增客户">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.addAccountNum ? scope.row.addAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="addSignAccountNum"
                                        label="新增成交客户">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.addSignAccountNum ? scope.row.addSignAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="signAccountTotalNum"
                                        label="成交总数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 2)" type="text">{{ scope.row.signAccountTotalNum ? scope.row.signAccountTotalNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="followAccountNum"
                                        label="跟进数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.followAccountNum ? scope.row.followAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div style="padding-top: 10px;">
                                <el-table
                                    height="200"
                                    :data="AccountNumGroupByArea"
                                    :row-style="{height: '0'}"
                                    :cell-style="{padding: '3px'}"
                                    max-height="400" border
                                    style="width: 90%">
                                    <el-table-column
                                        prop="name"
                                        label="地区">
                                    </el-table-column>
                                    <el-table-column
                                        prop="addAccountNum"
                                        label="新增客户">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 11)" type="text">{{ scope.row.addAccountNum ? scope.row.addAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="addSignAccountNum"
                                        label="新增成交客户">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.addSignAccountNum ? scope.row.addSignAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="signAccountTotalNum"
                                        label="成交总数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.signAccountTotalNum ? scope.row.signAccountTotalNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="followAccountNum"
                                        label="跟进数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 1)" type="text">{{ scope.row.followAccountNum ? scope.row.followAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_d">
                    <div class="content_detail">
                        <div style="display: flex;">
                            <div>
                                <div class="content_left_title">KA</div>
                                <div class="content_left_content">
                                    <div>
                                        <el-table
                                            height="400"
                                            :row-style="{height: '0'}"
                                            :cell-style="{padding: '3px'}"
                                            max-height="400" border
                                            :data="businessPersonGroupByBusinessTypeListByKA"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="username"
                                                label="姓名">
                                            </el-table-column>
                                            <el-table-column
                                                prop="addNum"
                                                label="新增数量">
                                                <template slot-scope="scope">
                                                    <el-button @click="goViewBusinessAccount(scope.row, 21)" type="text">{{ scope.row.addNum ? scope.row.addNum : 0 }}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="followNum"
                                                label="跟进数量">
                                                <template slot-scope="scope">
                                                    <el-button @click="goViewBusinessAccount(scope.row, 22)" type="text">{{ scope.row.followNum ? scope.row.followNum : 0 }}</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                            <div style="padding-left: 10px;">
                                <div class="content_left_title">BD</div>
                                <div class="content_left_content">
                                    <div>
                                        <el-table
                                            height="400"
                                            :row-style="{height: '0'}"
                                            :cell-style="{padding: '3px'}"
                                            max-height="400" border
                                            :data="businessPersonGroupByBusinessTypeListByBD"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="username"
                                                label="姓名">
                                            </el-table-column>
                                            <el-table-column
                                                prop="addNum"
                                                label="新增数量">
                                                <template slot-scope="scope">
                                                    <el-button @click="goViewBusinessAccount(scope.row, 23)" type="text">{{ scope.row.addNum ? scope.row.addNum : 0 }}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="followNum"
                                                label="跟进数量">
                                                <template slot-scope="scope">
                                                    <el-button @click="goViewBusinessAccount(scope.row, 24)" type="text">{{ scope.row.followNum ? scope.row.followNum : 0 }}</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_right">
                <div class="content_d">
                    <div class="content_detail">
                        <div class="content_left_title">客户区域</div>
                        <div class="content_left_content">
                            <div>
                                <el-table
                                    height="400"
                                    :row-style="{height: '0'}"
                                    :cell-style="{padding: '3px'}"
                                    max-height="400" border
                                    :data="accountCountAreaList"
                                    style="width: 90%">
                                    <el-table-column
                                        prop="name"
                                        label="地区">
                                        <template slot-scope="scope">
                                            {{ scope.row.province }}{{ scope.row.name }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="totalNum"
                                        label="总数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 31)" type="text">{{ scope.row.totalNum ? scope.row.totalNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="addAccountNum"
                                        label="新增客户数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 32)" type="text">{{ scope.row.addAccountNum ? scope.row.addAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="followAccountNum"
                                        label="跟进客户数">
                                        <template slot-scope="scope">
                                            <el-button @click="goViewBusinessAccount(scope.row, 33)" type="text">{{ scope.row.followAccountNum ? scope.row.followAccountNum : 0 }}</el-button>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="otherNum"
                                        label="其他">
                                        <template slot-scope="scope">
                                            {{ scope.row.otherNum ? scope.row.otherNum : 0 }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_d">
                    <div class="content_detail">
                        <div class="content_left_title">客保</div>
                        <div class="content_left_content">
                            <div>
                                <el-form label-position="right" label-width="180px" >
                                    <el-form-item label="沟通中品牌：">
                                        <el-button @click="goViewProtect(41)" type="text">{{ accountProtectDTO.connectBrandsNum }}</el-button>
                                    </el-form-item>
                                    <el-form-item label="已合作品牌：">
                                        <el-button @click="goViewProtect(42)" type="text">{{ accountProtectDTO.hasCooperateBrandsNum }}</el-button>
                                    </el-form-item>
                                    <el-form-item label="受保品牌：">
                                        <el-button @click="goViewProtect(44)" type="text">{{ accountProtectDTO.insuredBrandsNum }}</el-button>
                                    </el-form-item>
                                    <el-form-item label="不受保品牌：">
                                        <el-button @click="goViewProtect(43)" type="text">{{ accountProtectDTO.uninsuredBrandsNum }}</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import APIBusinessAccountCount from "@/api/apiBusinessAccountCount";

export default {
    name: "BusinessAccountCountDetail",
    components: {
    },
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    watch: {
    },
    data() {
        return {
            value1: [],
            userInfo: {},
            tableLoading: false,
            searchForm: {
                date: [new Date(), new Date()]
            },
            dateList: [
                {
                    label: '本日',
                    value: 1,
                },
                {
                    label: '本周',
                    value: 2,
                },
                {
                    label: '本月',
                    value: 3,
                },
                {
                    label: '本年',
                    value: 4,
                }
            ],
            accountTotalNum: 0,
            AccountNumGroupByDepart: [],
            AccountNumGroupByArea: [],
            businessPersonGroupByBusinessTypeListByKA: [],
            businessPersonGroupByBusinessTypeListByBD: [],
            accountCountAreaList: [],
            accountProtectDTO: {
                connectBrandsNum: 0,
                hasCooperateBrandsNum: 0,
                insuredBrandsNum: 0,
                uninsuredBrandsNum: 0,
            },
        };
    },
    activated() {
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
        this.getMsg()
    },
    mounted() {
    },
    methods: {
        goViewProtect(type){
            // 客保跳转
            if(type == 41){
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        hasConnect: true,
                    }
                });
            }else if(type == 42){
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        hasCooperate: true,
                    }
                });
            }else if(type == 43){
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        hasNoProtect: true,
                    }
                });
            }else if(type == 44){
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        hasProtect: true,
                    }
                });
            }
        },
        goViewBusinessAccount(row, type){
            if(type == 1){
                // 部门新增客户点击
                // 部门+时间段
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        departId: row.id,
                        startTime: this.searchForm.date[0].getTime(),
                        endTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 2){
                // 部门新增成交客户点击
                // 部门+时间段+确认成交
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        departId: row.id,
                        hasCheck: true,
                        checkStartTime: this.searchForm.date[0].getTime(),
                        checkEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 3){
                // 部门成交总数点击
                // 部门+确认成交
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        departId: row.id,
                        hasCheck: true,
                    }
                });
            }else if(type == 4){
                // 部门跟进数点击
                // 部门
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        departId: row.id,
                        followStartTime: this.searchForm.date[0].getTime(),
                        followEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 11){
                // 地区新增客户点击
                // 地区+时间段
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        areaId: row.id,
                        startTime: this.searchForm.date[0].getTime(),
                        endTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 12){
                // 地区新增成交客户点击
                // 地区+确认成交+时间段
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        areaId: row.id,
                        hasCheck: true,
                        checkStartTime: this.searchForm.date[0].getTime(),
                        checkEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 13){
                // 地区成交总数点击
                // 地区+确认成交
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        areaId: row.id,
                        hasCheck: true,
                    }
                });
            }else if(type == 14){
                // 地区跟进数点击
                // 地区+跟进时间段
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        areaId: row.id,
                        followStartTime: this.searchForm.date[0].getTime(),
                        followEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 15){
                // 地区总数点击
                // 地区id
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        areaId: row.id,
                    }
                });
            }else if(type == 21){
                // KA新增数量点击
                // KA+商务id+创建时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        businessType: 1,
                        businessId: row.userId,
                        startTime: this.searchForm.date[0].getTime(),
                        endTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 22){
                // KA跟进数量点击
                // KA+商务id+跟进时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        businessType: 1,
                        businessId: row.userId,
                        followStartTime: this.searchForm.date[0].getTime(),
                        followEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 23){
                // BD新增数量点击
                // BD+商务id+创建时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        businessType: 2,
                        businessId: row.userId,
                        startTime: this.searchForm.date[0].getTime(),
                        endTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 24){
                // BD跟进数量点击
                // BD+商务id+跟进时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        businessType: 2,
                        businessId: row.userId,
                        followStartTime: this.searchForm.date[0].getTime(),
                        followEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 31){
                // 客户区域总数点击
                // 省+市
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        province: row.province,
                        city: row.name,
                    }
                });
            }else if(type == 32){
                // 客户区域新增客户数点击
                // 省+市+时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        province: row.province,
                        city: row.name,
                        startTime: this.searchForm.date[0].getTime(),
                        endTime: this.searchForm.date[1].getTime()
                    }
                });
            }else if(type == 33){
                // 客户区域跟进客户数点击
                // 省+市+跟进时间
                this.$router.push({
                    path: '/businessAccount',
                    query: {
                        province: row.province,
                        city: row.name,
                        followStartTime: this.searchForm.date[0].getTime(),
                        followEndTime: this.searchForm.date[1].getTime()
                    }
                });
            }
        },
        getWeekStartAndEnd() {
            var today = new Date(); // 创建一个新的Date对象，表示当前日期和时间
            var dayOfWeek = today.getDay(); // 获取今天是星期几（0-6，其中0为星期日）
            var startTime;
            if (dayOfWeek === 0) {
                startTime = today; // 如果今天是星期日，则本周的开始时间就是今天
            } else {
                startTime = new Date(today); // 否则，将今天复制到startTime变量中作为基准点
                for (var i = 1; i < dayOfWeek; i++) {
                    startTime.setDate(startTime.getDate() - 1); // 通过设置日期向前移动，直到达到上一个星期日
                }
            }
            var endTime = new Date(startTime); // 将startTime复制到endTime变量中作为基准点
            endTime.setDate(endTime.getDate() + 6); // 通过设置日期向后移动6天，得到本周的最后一天
            return [startTime, endTime]; // 返回包含开始时间和结束时间的数组
        },
        chooseDate(item){
            if(item.value == 1){
                this.searchForm.date = [new Date(), new Date()];
            }else if(item.value == 2){
                // 获取本周开始时间和结束时间
                this.searchForm.date = this.getWeekStartAndEnd();
            }else if(item.value == 3){
                this.searchForm.date = [new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)];
            }else if(item.value == 4){
                this.searchForm.date = [new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear(), 11, 31)];
            }
            this.getMsg();
        },
        getMsg(){
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
            };
            if(this.searchForm.date && this.searchForm.date.length > 1){
                params.startTime = new Date(this.searchForm.date[0]).getTime()
                params.endTime = new Date(this.searchForm.date[1]).getTime()
            }
            APIBusinessAccountCount.viewBusinessAccountCount(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    let data = res.data
                    if(data){
                        this.accountTotalNum = data.accountTotalNum
                        this.AccountNumGroupByDepart = data.AccountNumGroupByDepart
                        this.AccountNumGroupByArea = data.AccountNumGroupByArea
                        this.businessPersonGroupByBusinessTypeListByKA = data.businessPersonGroupByBusinessTypeListByKA
                        this.businessPersonGroupByBusinessTypeListByBD = data.businessPersonGroupByBusinessTypeListByBD
                        this.accountCountAreaList = data.accountCountAreaList
                        this.accountProtectDTO = data.accountProtectDTO
                    }
                    this.tableLoading = false;
                }
            });
        },
    },
};
</script>

<style>
.business_account_count_detail{
    position: relative;
    margin-top: -70px;
}
.title{
    position: absolute;
    right: 35%;
    height: 100px;
    width: 450px;
}
.title_choose_time{
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 20px;
}
.title_choose_list{
    display: flex;
    width: 100%;
}
.title_choose_item{
    width: 50px;
    height: 30px;
    justify-content: center;
    display: flex;
    align-items: center;
    padding-left: 15%;
}
.content{
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 100px;
}
.content_left{
    position: absolute;
    left: 0;
    width: 50%;
    padding-bottom: 50px;
}
.content_right{
    position: absolute;
    right: 0;
    width: 50%;
    height: 50%;
    padding-bottom: 50px;
}
.content_d{
    border: 1px solid #d5d5d5;
}
.content_detail{
    width: 100%;
    margin: 20px;
    min-height: 440px;
}
.content_left_title{
    width: 90%;
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
}
</style>
<style lang="sass">
</style>
<style lang="sass" scoped>
</style>
